<script setup>
import { getDefectiveCurve } from '@/api/visual/qualityDashboard'
import { formatMoney } from '@/utils/globalMethod'

const xAxisData = ref([])
const yAxisData = ref([])
const dataTotal = ref(0)
const key = ref(1)

const option = computed(() => ({
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: xAxisData.value,
      axisLabel: {
        color: '#ccc1c1'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#2b2c33'
        }
      },
      axisLabel: {
        color: '#ccc1c1'
      }
    }
  ],
  grid: {
    left: '5%',
    right: '5%',
    bottom: '20%',
    containLabel: true
  },
  series: [
    {
      name: '本期',
      itemStyle: {
        color: '#FF0000'
      },
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: {
        focus: 'series'
      },
      data: yAxisData.value,
      type: 'line',
      smooth: true
    }
  ]
}))

const loadData = async () => {
  const { data } = await getDefectiveCurve()
  data.forEach(item => {
    xAxisData.value.push(item.BillDate)
    yAxisData.value.push(formatMoney(item.PrdQuantity))
  })
  dataTotal.value = data.length
}

const keyResize = () => {
  key.value++
}

onMounted(() => {
  window.addEventListener('fullscreenchange', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('fullscreenchange', keyResize)
})

onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100 salesBoard7">
    <dv-border-box10 :key="key">
      <el-card class="ps_w_h_100 salesBoard7-card">
        <template #header>
          <div class="salesBoard7-card-header board-title">
            <span>近{{ dataTotal }}日不良品曲线图</span>
          </div>
        </template>

        <ps-chart2 :option="option"></ps-chart2>
      </el-card>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss">
.salesBoard7 {
  &-card-header {
    display: flex;
    justify-content: space-between;

    .bq {
      margin-right: 20px;
    }
  }
}

:deep(.el-card) {
  background-color: transparent;
  border: unset;

  .el-card__body {
    padding: 0;
    height: 100%;
  }
}
</style>
